<ion-header>
    <ion-toolbar>
        <img src="http://doc.canglaoshi.org/tstore_v1/images/header/logo.png" alt="" slot="start">
        <ion-searchbar placeholder="搜索"></ion-searchbar>
    </ion-toolbar>
</ion-header>
<ion-content *ngIf="res">
    <ion-slides pager [options]="{autoplay:{disableOnInteraction:false},loop:true}">
        <ion-slide *ngFor="let item of res.carouselItem">
            <img [src]="'http://101.96.128.94:9999'+item.img" alt="">
        </ion-slide>
    </ion-slides>
    <ion-item>
        <ion-icon name="desktop" slot="start"></ion-icon>
        <ion-label>首页推荐 / 1F</ion-label>
    </ion-item>
    <ion-grid fixed>
        <ion-row>
            <ion-col size="6" *ngFor="let item of res.recommendItem">
                <ion-card>
                    <img [src]="'http://101.96.128.94:9999'+item.pic" alt="">
                    <ion-card-header>
                        <ion-card-subtitle>{{item.title}}</ion-card-subtitle>
                        <ion-card-title>{{item.detail}}</ion-card-title>
                    </ion-card-header>
                    <ion-card-content>
                        <ion-label>￥{{item.price}}</ion-label>
                        <br>
                        <ion-button>
                            查看详情
                        </ion-button>
                    </ion-card-content>
                </ion-card>
            </ion-col>

        </ion-row>
    </ion-grid>
    <ion-item>
        <ion-icon name="desktop" slot="start"></ion-icon>
        <ion-label>最新上架 / 2F</ion-label>
    </ion-item>
    <ion-grid fixed>
        <ion-row>
            <ion-col size="6" *ngFor="let item of res.newArrivalItem">
                <ion-card>
                    <img [src]="'http://101.96.128.94:9999'+item.pic" alt="">
                    <ion-card-header>
                        <ion-card-subtitle>{{item.title}}</ion-card-subtitle>
                        <ion-card-title>{{item.detail}}</ion-card-title>
                    </ion-card-header>
                    <ion-card-content>
                        <ion-label>￥{{item.price}}</ion-label>
                        <br>
                        <ion-button>
                            查看详情
                        </ion-button>
                    </ion-card-content>
                </ion-card>
            </ion-col>

        </ion-row>
    </ion-grid>
    <ion-item>
        <ion-icon name="desktop" slot="start"></ion-icon>
        <ion-label>热销单品 / 3F</ion-label>
    </ion-item>
    <ion-grid fixed>
        <ion-row>
            <ion-col size="6" *ngFor="let item of res.topSaleItem">
                <ion-card>
                    <img [src]="'http://101.96.128.94:9999'+item.pic" alt="">
                    <ion-card-header>
                        <ion-card-subtitle>{{item.title}}</ion-card-subtitle>
                        <ion-card-title>{{item.detail}}</ion-card-title>
                    </ion-card-header>
                    <ion-card-content>
                        <ion-label>￥{{item.price}}</ion-label>
                        <br>
                        <ion-button>
                            查看详情
                        </ion-button>
                    </ion-card-content>
                </ion-card>
            </ion-col>

        </ion-row>
    </ion-grid>
    <ion-grid fixed>
        <ion-row>
            <ion-col style="text-align: center;">
                <ion-icon name="cart" color="light"></ion-icon>
            </ion-col>
            <ion-col style="text-align: center;">
                <ion-icon name="start" color="light"></ion-icon>
            </ion-col>
            <ion-col style="text-align: center;">
                <ion-icon name="heart" color="light"></ion-icon>
            </ion-col>
            <ion-col style="text-align: center;">
                <ion-icon name="compass" color="light"></ion-icon>
            </ion-col>

        </ion-row>
    </ion-grid>
</ion-content>